<template>
  <div class="container">
    <div class="login-box">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="70px" :inline="true">
        <h3 class="login_title">系统注册</h3>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" @blur="validateField('username')"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password" @blur="validateField('password')"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入QQ邮箱" @blur="validateField('email')"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="请输入手机号" @blur="validateField('phoneNumber')"></el-input>
        </el-form-item>
        <el-radio-group v-model="loginRole" class="roleSetting">
          <el-radio :label="user">用户</el-radio>
          <el-radio :label="admin">管理员</el-radio>
        </el-radio-group>
      </el-form>
      <div class="buttonSubmit">
        <el-button type="primary" class="login_button" @click="gotoLogin">去登录</el-button>
        <el-button type="success" @click="gotoRegister">注册</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import router from "../router";
import UserApi from "../apis/api.js";
import { ElMessage } from 'element-plus';

const form = reactive({
  username: '',
  password: '',
  email: '',
  phoneNumber: ''
});

const rules = {
  username: [
    { required: true, trigger: 'blur', message: '请输入用户名' }
  ],
  password: [
    { required: true, trigger: 'blur', message: '请输入密码' }
  ],
  email: [
    { required: true, trigger: 'blur', message: '请输入QQ邮箱' },
    { pattern: /^[a-zA-Z0-9._%+-]+@qq\.com$/, trigger: 'blur', message: '请输入正确的QQ邮箱地址' }
  ],
  phoneNumber: [
    { required: true, trigger: 'blur', message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '请输入正确的手机号' }
  ]
};

// 设置默认选择用户
const loginRole = ref('user');
const formRef = ref(null);

const validateField = (field) => {
  formRef.value.validateField(field);
};

// 定义常量
const user = 'user';
const admin = 'admin';

// 定义登录方法
const gotoLogin = () => {
  router.push({ path: '/login' });
};

// 定义注册逻辑
const gotoRegister = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const { username, password, email, phoneNumber } = form;
      const role = loginRole.value;
      const user = { username, password, email, phoneNumber, isUser: role === 'user' ? 0 : 1 };
      console.log(user);
      UserApi.postUser(user).then((res) => {
        console.log(res)
        const flag = res.data;
        if (flag === "该用户已经存在") {
          ElMessage.error({
            message: '用户名已存在',
            duration: 1500, // 设置显示时间为 1.5 秒
          });
          form.username = '';
          form.password = '';
          form.email = '';
          form.phoneNumber = '';
        } else {
          ElMessage.success({
            message: '注册成功',
            duration: 1500, // 设置显示时间为 1.5 秒
          });
          router.push({ path: "/login" });
        }
      }).catch((error) => {
        ElMessage.error({
          message: '注册失败，请重试',
          duration: 1500, // 设置显示时间为 1.5 秒
        });
        console.error(error);
      });
    } else {
      ElMessage.error('请填写正确的信息');
    }
  });
};
</script>

<style scoped>
.container {
  background-image: url("../img/Register.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

.login-box {
  width: 350px;
  height: 350px;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.login_title {
  text-align: center;
  margin-bottom: 40px;
  color: #505458;
}

.roleSetting {
  margin-left: 80px;
}

.buttonSubmit {
  margin-left: 80px;
}

.login_button {
  margin-right: 20px;
}
</style>
